<template>
  <a-form
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    :model="user"
  >
    <a-form-item label="员工账号">
      <a-input v-model:value="user.u_id" placeholder="Username">
        <template #prefix
          ><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
        /></template>
      </a-input>
    </a-form-item>
    <a-form-item label="密码">
      <a-input
        v-model:value="user.u_pwd"
        type="password"
        placeholder="Password"
      >
        <template #prefix
          ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
        /></template>
      </a-input>
    </a-form-item>
    <a-form-item :wrapper-col="{span: 14, offset: 4}">
      <a-button
        type = "primary"
        @click = "login"
        :disabled="user.user === '' || user.password === ''"
      >
        登录
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { reactive } from "vue";
import { post,setLocalToken,tip } from "@/common";

import { useRouter } from "vue-router";

const router = useRouter();//获取路由器

//reactivr 双向绑定式数据
const user = reactive({
  u_id: "",
  u_pwd: "",
});

const login = () => {
    //then仅接收成功的操作结果
    post('/staff/login',user).then((res)=>{

        tip.success("登录成功")

        //接受令牌
        const token = res.data;

        //存入本地
        setLocalToken(token);

        //跳转至home路由
        router.push({path:"/home"})

    });
};

const labelCol = {
  span: 4,
};

const wrapperCol = {
  span: 14,
};

components: {
  UserOutlined, LockOutlined;
}
</script>

<style>
</style>